<script setup lang="ts">
import { envs, installWebApp, isCanDownloadApp } from '~/utils';
import Icon1 from '../pic/icon-1.svg';
import Icon2 from '../pic/icon-2.svg';
import lightning from '../pic/lightning.svg';
import { GuidePopup } from './GuidePop.vue';
import { installProcessPopup } from './installProcessPopup.vue';
import Loading from './loading.vue';

const showLoading = ref(true);
const loadingDuration = ref(3000);

function install() {
  // TG环境 Tengine
  if (envs.isTg) {
    return;
  }

  // IOS 环境
  if (envs.isIos) {
    GuidePopup.open();
    return;
  }

  // 环境不支持时
  if (!isCanDownloadApp()) {
    installProcessPopup.open();
    return;
  }

  installWebApp(() => {
    showLoading.value = true;
    loadingDuration.value = 6000;
  });
}
</script>

<template>
  <div class="flex gap-4">
    <div class="h-20 w-20">
      <img src="../pic/logo.png" class="h-full">
    </div>
    <div>
      <h1 class="mb-0 text-5 text-sys-layer-a font-700">
        G9.game-Lucky Tiger
      </h1>
      <div class="text-4 text-#01875f">
        CADASTRE-SE E GANHE 100,00 REAIS
      </div>
      <div class="text-3 text-sys-text-body">
        Verificado pelo aplicativo
      </div>
    </div>
  </div>

  <div class="m-[0_auto] w-88%">
    <div class="flex justify-between text-#72768D">
      <div class="text-center">
        <div class="h-6 text-3.5 text-sys-layer-a">
          4,9 <i class="i-ri:star-fill" />
        </div>
        <div class="text-3">
          46K&nbsp;avaliações
        </div>
      </div>

      <div class="text-center">
        <div class="h-6 text-3.5 text-sys-layer-a">
          50&nbsp;mil+
        </div>
        <div class="text-3">
          Downloads
        </div>
      </div>

      <div class="text-center">
        <div class="h-6 text-3.5 text-sys-layer-a">
          <img src="../pic/info-1.png" class="h-4 w-4">
        </div>
        <div class="text-3">
          Rated for 18+
        </div>
      </div>
    </div>
  </div>

  <div class="w-full">
    <div class="rounded-2 bg-#01875f py-2.5 text-center" @click="install">
      <div class="text-3.5 text-#ffe336">
        <img class="h-4 w-4" :src="lightning"> <span>Rapid Instalar</span>
      </div>
      <span class="text-3 text-sys-text-head">Baixe dentro de 15 segundos</span>
    </div>

    <div
      class="m-[0_auto] mt-6 w-96% flex items-center justify-between gap-3 text-3.5 text-#01875f"
      @click="install"
    >
      <div class="flex flex-1 items-center gap-2">
        <img :src="Icon1" alt="" class="h-5 w-5">
        <span>Compartilhar</span>
      </div>
      <div class="flex flex-1 items-center gap-2">
        <img :src="Icon2" alt="" class="h-5 w-5">
        <span>Adicionar à lista de desejos</span>
      </div>
    </div>
  </div>
  <Loading v-model="showLoading" :duration="loadingDuration" />

  <GuidePopup.PresetComponent />
  <installProcessPopup.PresetComponent />
</template>
